<script lang="ts" setup>
import type {
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
} from '@vben/common-ui';

import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  WorkbenchHeader,
  WorkbenchQuickNav,
  WorkbenchTodo,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';

import dayjs from 'dayjs';

import { getSystemStatus } from '#/api/monitor/system';
import type { SystemHealthInfo } from '#/api/monitor/system';
import { useNotifyStore } from '#/store';
import { useWorkbenchTodo } from '#/composables/use-workbench-todo';

import SystemHealthChart from './components/system-health-chart.vue';
import AccessStatsChart from './components/access-stats-chart.vue';



const userStore = useUserStore();
const notifyStore = useNotifyStore();
const {
  todos,
  isLoading: todoLoading,
  addTodo,
  updateTodo,
  deleteTodo,
  toggleComplete,
  initializeTodos,
  loadTodosBackup,
  getDataStats,
} = useWorkbenchTodo();

// 系统状态数据
const systemStatus = ref<SystemHealthInfo | null>(null);

// 动态问候语计算
const dynamicGreeting = computed(() => {
  const currentHour = dayjs().hour();
  const realName = userStore.userInfo?.realName || '用户';
  
  if (currentHour >= 6 && currentHour < 12) {
    return `早安, ${realName}, 开始您一天的工作吧！`;
  } else if (currentHour >= 12 && currentHour < 18) {
    return `下午好, ${realName}, 希望您工作顺利！`;
  } else if (currentHour >= 18 && currentHour < 22) {
    return `晚上好, ${realName}, 辛苦了一天！`;
  } else {
    return `晚安, ${realName}, 注意休息！`;
  }
});

// 头部显示信息计算
const headerInfo = computed(() => {
  const userInfo = userStore.userInfo;
  
  // 获取当前用户的未读通知数量
  const notificationCount = notifyStore.notifications.filter(item => !item.isRead).length;
  
  return {
    userRole: userInfo?.roles?.[0] || '管理员',
    permissionLevel: userInfo?.permissions?.length > 10 ? '超级管理员' : '普通管理员',
    notificationCount,
  };
});

// 获取系统状态数据
async function fetchSystemStatus() {
  try {
    const status = await getSystemStatus();
    systemStatus.value = status;
  } catch (error) {
    console.error('获取系统状态失败:', error);
  }
}

// 组件挂载时获取系统状态
onMounted(async () => {
  fetchSystemStatus();
  
  // 待办事项数据初始化和验证
  await initializeTodoData();
});

// 待办事项数据初始化
async function initializeTodoData() {
  try {
    console.log('开始初始化工作台待办事项数据...');
    
    // 从后端加载待办事项数据
    await initializeTodos();
    
    // 检查是否成功获取到数据
    if (todos.value.length === 0) {
      console.warn('主方法没有获取到数据，尝试备用方法...');
      await loadTodosBackup();
    }
    
    console.log('工作台待办事项初始化完成，共', todos.value.length, '条数据');
    
    // 输出数据统计（开发环境）
    if (import.meta.env.DEV) {
      const stats = getDataStats();
      console.log('📋 待办事项数据统计:', stats);
    }
  } catch (error) {
    console.error('待办事项数据初始化失败:', error);
    
    // 降级处理：尝试备用方法
    try {
      console.log('主方法失败，尝试备用加载方法...');
      await loadTodosBackup();
      
      if (todos.value.length > 0) {
        console.log('备用方法成功，获取到', todos.value.length, '条数据');
      } else {
        console.warn('备用方法也没有获取到数据');
      }
    } catch (retryError) {
      console.error('备用方法也失败了:', retryError);
    }
  }
}





// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ant-design:user-outlined',
    title: '用户管理',
    url: '/system/user',
  },
  {
    color: '#bf0c2c',
    icon: 'eos-icons:role-binding-outlined',
    title: '角色管理',
    url: '/system/user',
  },
  {
    color: '#e18525',
    icon: 'material-symbols:generating-tokens-outline',
    title: '在线用户',
    url: '/monitor/online',
  },
  {
    color: '#3fb27f',
    icon: 'arcticons:one-hand-operation',
    title: '操作日志',
    url: '/monitor/log/operlog', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
  },
  {
    color: '#4daf1bc9',
    icon: 'fe:notice-push',
    title: '通知公告',
    url: '/system/notice',
  },
  {
    color: '#00d8ff',
    icon: 'tabler:code',
    title: '代码生成',
    url: '/tool/gen',
  },
];

// 待办事项事件处理
async function handleAddTodo(title: string, content: string) {
  try {
    await addTodo(title, content);
  } catch (error) {
    console.error('添加待办事项失败:', error);
    // 可以添加用户提示
  }
}

async function handleToggleTodoCompleted(item: WorkbenchTodoItem) {
  try {
    // 优化查找逻辑：优先使用todoId，fallback到title+content匹配
    const todo = findTodoByItem(item);
    if (todo) {
      await toggleComplete(todo.todoId);
    } else {
      console.warn('未找到对应的待办事项:', item);
    }
  } catch (error) {
    console.error('切换待办事项状态失败:', error);
    // 可以实现状态回滚逻辑
  }
}

async function handleEditTodo(item: WorkbenchTodoItem) {
  try {
    const todo = findTodoByItem(item);
    if (todo) {
      console.log('编辑待办事项 - 原始数据:', todo);
      console.log('编辑待办事项 - 新数据:', item);
      
      await updateTodo(todo.todoId, {
        title: item.title,
        content: item.content,
        completed: todo.completed, // 保持原有的完成状态
      });
    } else {
      console.warn('未找到要编辑的待办事项:', item);
    }
  } catch (error) {
    console.error('编辑待办事项失败:', error);
  }
}

async function handleDeleteTodo(item: WorkbenchTodoItem) {
  try {
    const todo = findTodoByItem(item);
    if (todo) {
      await deleteTodo(todo.todoId);
    } else {
      console.warn('未找到要删除的待办事项:', item);
    }
  } catch (error) {
    console.error('删除待办事项失败:', error);
  }
}

// 优化的查找逻辑：统一处理todoId和title+content匹配
function findTodoByItem(item: WorkbenchTodoItem) {
  // 首先尝试通过todoId查找（如果item有todoId属性）
  if ('todoId' in item && (item as any).todoId) {
    const todo = todos.value.find(t => t.todoId === (item as any).todoId);
    if (todo) return todo;
  }
  
  // Fallback到title+content匹配
  return todos.value.find(t => 
    t.title === item.title && t.content === item.content
  );
}


const router = useRouter();

// 这是一个示例方法，实际项目中需要根据实际情况进行调整
// This is a sample method, adjust according to the actual project requirements
function navTo(nav: WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('http')) {
    openWindow(nav.url);
    return;
  }
  if (nav.url?.startsWith('/')) {
    router.push(nav.url).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
}
</script>

<template>
  <div class="p-5">
    <div class="mt-5 flex flex-col lg:flex-row">
      <!-- 左侧主要内容区域 -->
      <div class="mr-4 w-full lg:w-3/5">
        <!-- 头部区域 -->
        <WorkbenchHeader
          :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
          :user-role="headerInfo.userRole"
          :permission-level="headerInfo.permissionLevel"
          :notification-count="headerInfo.notificationCount"
        >
          <template #title>
            {{ dynamicGreeting }}
          </template>
          <template #description>欢迎使用管理系统</template>
        </WorkbenchHeader>
        
        <!-- 系统状态和访问统计 -->
        <SystemHealthChart class="mt-5" />
        <AccessStatsChart class="mt-5" />
      </div>
      
      <!-- 右侧区域 -->
      <div class="w-full lg:w-2/5">
        <!-- 快捷导航 -->
        <WorkbenchQuickNav
          :items="quickNavItems"
          title="快捷导航"
          @click="navTo"
        />
        
        <!-- 待办事项 -->
        <WorkbenchTodo 
          :items="todos" 
          :loading="todoLoading"
          :show-add-form="true"
          :max-display-items="6"
          class="mt-5" 
          title="待办事项"
          @add-todo="handleAddTodo"
          @toggle-completed="handleToggleTodoCompleted"
          @edit-todo="handleEditTodo"
          @delete-todo="handleDeleteTodo"
        />
      </div>
    </div>
  </div>
</template>
